<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="setBtn">新增</button>
    <button class="getBtn">获取</button>
</body>
<script>

    // cookie的特征
    // 1. cookie的存取都依赖于document.cookie(字符串)
    // 2. cookie也是以键值对的形式存在的(一条)
    // 3. cookie存储时是一条一条存储的,获取时是将所有的cookie整合到一整个字符串中,用"; "分隔
    // 3. cookie可以设置存储路径 和 过期时间(默认:浏览器关闭过期)

    var setBtn = document.getElementsByClassName("setBtn")[0];
    var getBtn = document.getElementsByClassName("getBtn")[0];


    // 只存储数据 没有设置存储路径和过期时间
    // setBtn.onclick = function () {
    //     document.cookie = "user=a123123";
    //     document.cookie = "pwd=123123";
    //     document.cookie = "phone=17386141517";
    //     document.cookie = "email=123123@qq.com";
    // }

    // cookie的时效性 =>  cookie可以自定义过期时间
    // a. 默认情况下,如果不设置过期时间,默认浏览器关闭,cookie会过期 -> 被清除
    // b. 如果想设置过期时间,需要在cookie数据之后添加expires属性 -> 设置过期时间(expires可以接收一个日期字符串用于设置过期时间(世界时))

    // date.toString()  将日期对象转字符串(中国标准时间)
    // date.toUTCString()  将日期对象转字符串(世界时)
    // setBtn.onclick = function () {
    //     var date = new Date();
    //     date.setDate(date.getDate() + 31);

    //     document.cookie = "user=a123123; expires=" + date.toUTCString();
    //     document.cookie = "pwd=123123; expires=" + date.toUTCString();
    //     document.cookie = "phone=17386141517; expires=" + date.toUTCString();
    //     document.cookie = "email=123123@qq.com; expires=" + date.toUTCString();
    // }


    // cookie的跨页面访问 -> cookie可以设置存储路径
    // cookie默认存储在当前文件所在的目录,该目录,以及子目录下所有的文件均可以访问存储的cookie
    // 如果想自定义cookie的存储路径,需要给cookie添加path属性 -> 接收一个站点根目录开始的路径(/day31)
    setBtn.onclick = function () {
        var date = new Date();
        date.setDate(date.getDate() + 31);
        document.cookie = "user=a123123;expires=" + date.toUTCString() + ";path=/";
        document.cookie = "pwd=123123;expires=" + date.toUTCString() + ";path=/";
        document.cookie = "phone=17386141517;expires=" + date.toUTCString() + ";path=/";
        document.cookie = "email=123123@qq.com;expires=" + date.toUTCString() + ";path=/";
    }


    getBtn.onclick = function () {
        console.log(document.cookie);
        var cookie = document.cookie;
        var data = {};
        if (cookie) {
            var list = cookie.split("; ");
            for (var i = 0; i < list.length; i++) {
                var item = list[i];  // 每一条数据 'user=a123123'
                var key = item.split("=")[0]; // "user"
                var val = item.split("=")[1]; // "a123123"
                data[key] = val;
            }
        }

        console.log(data);
    }
</script>

</html>